<template>
	<div class="left" id="left">
    <div style="border-bottom: 1px solid rgb(227, 232, 241);"><img :src="logo" style="width: 300px; height: 90px;"></div>
    <div class="nav">
      <div class="flexc" @click="go('/index')"  :class="act == 7?'navtitleact':'navtitle'">
        <div><img src="../../static/img/shouye.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>首页</div>
      </div>
      <div class="flexc" :class="act == 1?'navtitleact':'navtitle'">
        <div><img src="../../static/img/shangpinguanli.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>商品管理</div>
      </div>
      <div class="navli">
      	<router-link to="/shangpinguanli/gongyingshangshangpin">供应商商品</router-link>
      </div>
      <div class="navli">
      	<router-link to="/shangpinguanli/zaishoushangpin">在售商品</router-link>
      </div>
      <div class="flexc" :class="act == 2?'navtitleact':'navtitle'">
        <div><img src="../../static/img/zhibotuiguang.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>直播推广</div>
      </div>
      <div class="navli">
      	<router-link to="/zhibotuiguang/duoshangpin">多商品页</router-link>
      </div>
      <div class="navli">
      	<router-link to="/zhibotuiguang/danshangpin">单商品页</router-link>
      </div>
      <div class="flexc" :class="act == 3?'navtitleact':'navtitle'">
        <div><img src="../../static/img/fenxiaoshangguanli.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>分销商管理</div>
      </div>
      <div class="navli">
      	<router-link to="/fenxiaoshangguanli/fenxiaoshangguanli">分销商管理</router-link>
      </div>
      <div class="navli">
      	<router-link to="/fenxiaoshangguanli/fenxiaomoshi">分销模式</router-link>
      </div>
      <div class="navli">
      	<router-link to="/fenxiaoshangguanli/zhaomufenxiaoyuan">招募分销员</router-link>
      </div>


      <div class="flexc" :class="act == 4?'navtitleact':'navtitle'">
        <div><img src="../../static/img/dingdanguanli.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>订单管理</div>
      </div>
      <div class="navli">
      	<router-link to="/dingdanguanli/dingdanchuli">我的订单</router-link>
      </div>
      <div class="navli">
      	<router-link to="/dingdanguanli/fenxiaoshangdingdan">分销商订单</router-link>
      </div>

      <div class="flexc" :class="act == 5?'navtitleact':'navtitle'">
        <div><img src="../../static/img/caiwuguanli.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>财务管理</div>
      </div>
      <div class="navli">
      	<router-link to="/yongjin/yongjinguanli">佣金结算订单管理</router-link>
      </div>
      <div class="navli">
      	<router-link to="/yongjin/yongjinjilu">佣金结算记录</router-link>
      </div>
      <div class="navli">
      	<router-link to="/yongjin/yongjindakuan">佣金打款</router-link>
      </div>

      <div class="flexc"  @click="go('/xitongpeizhi')"  :class="act == 6?'navtitleact':'navtitle'">
        <div><img src="../../static/img/xitongpeizhi.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>系统配置</div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		name: 'left',
		data() {
			return {
        act:7,
        logo:""
			}
		},
		created() {


      this.logo = localStorage.getItem('left_logo') || '../../static/img/logo.jpg'
      document.title = localStorage.getItem('shop_name')


      //判断蓝条
      if(this.$route.fullPath.includes('shangpinguanli')){
        this.act = 1
      }
      if(this.$route.fullPath.includes('fenxiaoshangguanli')){
        this.act = 3
      }
      if(this.$route.fullPath.includes('xitongpeizhi')){
        this.act = 6
      }
      if(this.$route.fullPath.includes('dingdanguanli')){
        this.act = 4
      }
      if(this.$route.fullPath.includes('zhibotuiguang')){
        this.act = 2
      }
      if(this.$route.fullPath.includes('yongjin')){
        this.act = 5
      }

		},

		mounted() {
      let obj = document.getElementById('left')
      obj.addEventListener('scroll', function() {
        localStorage.setItem('hhh',obj.scrollTop)
      })

      if(localStorage.getItem('hhh')){
        obj.scrollTop = localStorage.getItem('hhh')
      }
		},
		methods: {

		}
	}
</script>


<style scoped lang="less">
  .nav{
    padding: 0 30px;
    .navtitleact{
      margin-top: 37px; background: rgb(0, 90, 255); width: 240px; height: 60px; color: #fff; box-shadow: 0px 10px 20px 0px rgba(0, 90, 255, 0.1); border-radius:16px; cursor: pointer;
      img{
        filter: drop-shadow(rgb(255, 255, 255) 100px 0);
        transform: translateX(-100px);
        position: relative;
        top: -1px;
      }
    }
    .navtitle{
      margin-top: 37px;  width: 240px; height: 60px; cursor: pointer;
      img{
        filter: drop-shadow(rgb(120, 125, 133) 100px 0);
        transform: translateX(-100px);
        position: relative;
        top: -1px;
      }
      &:hover {
      	margin-top: 37px; background: rgb(0, 90, 255); width: 240px; height: 60px; color: #fff; box-shadow: 0px 10px 20px 0px rgba(0, 90, 255, 0.1); border-radius:16px;
        img{
          filter: drop-shadow(rgb(255, 255, 255) 100px 0);
          transform: translateX(-100px);
          position: relative;
          top: -1px;
        }
      }
    }
      // /deep/ .router-link-active {
      //   background: #FEF4F5;
      //   color: #F72C6A !important;
      //   img{
      //       filter: drop-shadow(#F72C6A 100px 0) !important;
      //       transform: translateX(-100px);
      //   }
      // }

    // .navli {
    // 	line-height: 50px;
    // 	color: #7B8699;
    // 	font-size: 14px;
    // 	cursor: pointer;
    //   border-radius: 5px;
    //   font-weight: bold;

    // 	a {
    // 		color: #7B8699;
    // 		display: block;
    // 		padding-left: 25px;
    //     display: flex;
    //     align-items: center;
    //     border-radius: 5px;

    //     &:hover {
    //     	color: #F72C6A !important;
    //     }
    // 	}

    //   img{
    //     filter: drop-shadow(#C0C6D2 100px 0);
    //     transform: translateX(-100px);
    //     position: relative;
    //     top: -1px;
    //   }

    // 	&:hover {
    // 		background: #FEF4F5; transition: all 0.2s;
    //     img{
    //         filter: drop-shadow(#F72C6A 100px 0);
    //         transform: translateX(-100px);
    //     }
    // 	}
    // }
    .router-link-active{color: rgb(0, 90, 255) !important;}
    .router-link-exact-active{color: rgb(0, 90, 255) !important;}
    .navli { margin-top: 20px;
    	a {
        padding-left: 70px;
    		color: rgb(175, 179, 188);
    		font-size: 14px;
    		cursor: pointer;

        &:hover {
        	color: rgb(0, 90, 255) !important;
        }
    	}
    }
  }

</style>         
